<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>动态配置定时任务示例</title>
        <meta name="viewport"
              content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">

        <script type="text/javascript" src="plugins/jquery-3.5.1.min.js"></script>
        <script type="text/javascript" src="plugins/vue/vue.js"></script>
        <script type="text/javascript" src="plugins/axios/axios.js"></script>
        <style type="text/css">
            li{
                margin: 20px;
            }
            button{
                margin: 20px;
            }
        </style>
    </head>
    <body>
        <div id="app" style="margin-left: 100px;margin-right: 100px">
            <ul>
                <li>
                    <input v-model="task.taskName" type="text" placeholder="设置定时任务的名称">
                    <input v-model="task.className" type="text" placeholder="添加定时任务的类名">
                    <input v-model="task.cron" type="text" placeholder="设置定时cron时间">
                </li>
                <li>
                    <button type="button" @click="start">开始定时任务</button>
                    <button type="button" @click="addtask">添加定时任务</button>
                    <button type="button" @click="modifytask">修改定时任务</button>
                    <button type="button" @click="deltask">删除定时任务</button>
                </li>
            </ul>
        </div>
    </body>
    <script type="text/javascript">
        new Vue({
            el: '#app',
            data() {
                return {
                    task: {
                        taskName: "mytask",
                        className:"org.example.job.QueryAllDeptsJob",
                        cron:"0/2 * * * * ?"
                    }
                }
            },
            methods: {
                start() {
                    axios.get("/job/starttask").then(res => {
                        if (res.data.success) {
                            alert(res.data.msg)
                        }
                    })
                },
                modifytask() {
                    axios.post("/job/modifytask", this.task).then(res => {
                        if (res.data.success) {
                            alert(res.data.msg)
                        }
                    })
                },
                addtask() {
                    axios.post("/job/addtask", this.task).then(res => {
                        if (res.data.success) {
                            alert(res.data.msg)
                        }
                    })
                },
                deltask() {
                    axios.get("/job/deltask/" + this.task.taskName).then(res => {
                        if (res.data.success) {
                            alert(res.data.msg)
                        }
                    })
                }

            }
        })
    </script>
</html>
